<#include "../common/_header.htm">
<div id="hidebox" >
	<div class="form-group">
        <label class="control-label userName">交易主体：</label>
        <input type="text" class="form-control nameInp" name="personName" v-model="personName" disabled="disabled"/>
	</div>
	<div class="newAdd-kWord">
		<label class="control-label" style="float: left;margin-left: 40px;">标签：</label>
           <div id="batchKey">
               <el-tag
                       :key="tag"
                       v-for="tag in dynamicTags"
                       closable
                       :disable-transitions="false"
                       @close="handleClose(tag)">
                   {{tag}}
               </el-tag>
               <el-input
                       class="input-new-tag"
                       v-if="inputVisible"
                       v-model="inputValue"
                       ref="saveTagInput"
                       size="small"
                       @keyup.enter.native="handleInputConfirm"
                       @blur="handleInputConfirm"
               >
               </el-input>
               <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签名称</el-button>
           </div>
           <div class="bulkInsert">
               <input type="text" class="bulk-input" placeholder=请输入关键字 v-model="bulkInputVal" onKeyUp="ReplaceDot(this)">
               <input type="button" value="批量添加" class="bulkInsert-iqre" @click="iqreAdd">
               <input type="button" value="清空" class="bulkInsert-epty" @click="keyEmpty">
           </div>
     </div>
	<div class="modal-footer">
		<button type="button" class="btn bulkInsert-sure" @click="getContent">保存</button>
	</div>
</div>
<script>
   	/** 回去传值 **/
   	var dialog = top.dialog.get(window);
    var accountBody = dialog.data.accountBody; // 获取对话框传递过来的数据
    var personId = dialog.data.personId; // 获取对话框传递过来的数据
	function ReplaceDot(obj) {
        var oldValue=obj.value;
        while(oldValue.indexOf("，")!=-1)//寻找每一个中文逗号，并替换
        {
            obj.value=oldValue.replace("，",",");
            oldValue=obj.value;
        }
        obj.value = oldValue;
    };
    $.ajax({
      	type : "post",
          url : "${ctx}/bill/stream/d3/getPersonTag",
          contentType : "application/json;charset=UTF-8",
          data : JSON.stringify({"personId" : personId}),
          success : function (data) {
          	  batchKey.dynamicTags = data.ps;
          }
    });
	let batchKey = new Vue({
        el:"#hidebox",
        data() {
            return {
                dynamicTags : [],
                inputVisible : false,
                inputValue : '',
                personName : accountBody,
                bulkInputVal : ''
            };
        },
        methods : {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            iqreAdd(){
                var _this = this;
                var str = this.bulkInputVal;
                var arr = str.split(",");
                arr.forEach(function(n){
                     _this.dynamicTags.push(n);
               })  
                this.inputVisible = false;
                this.bulkInputVal = '';
            },
            keyEmpty(){
                this.dynamicTags = [];
            },
            getContent(){
                var tag = batchKey.dynamicTags;//关键字
                var data = { "personId" : personId, "sbparticiples" : tag.join(',') };
                $.ajax({
                	type : "post",
                    url : "${ctx}/bill/stream/d3/addAndEditQuestion",
                    contentType: "application/json;charset=UTF-8",
                    data : JSON.stringify(data),
                    success : function (date) {
                    	if(date.result = 'success'){
                    		dialog.close();
                    	}
                    },
                    error : function() {
                    	toastr.error("保存失败","提示信息");
                    }
                });
            }
        }
    });
</script>
<style>
	.filEditBtn {
	        width: 90px;
		    height: 32px;
		    line-height: 10px;
		    background-color: #4695ed;
		    border-color: #4695ed;
		    margin-top: -80px;
		    margin-left: 168px;
	}
	.filTagEditBtn {
	        width: 90px;
		    height: 32px;
		    line-height: 10px;
		    background-color: #4695ed;
		    border-color: #4695ed;
		    margin-top: -80px;
		    margin-left: 20px;
	}
	.deleteEditBtn {
	        width: 90px;
		    height: 32px;
		    line-height: 10px;
		    margin-top: -80px;
		    margin-left: 20px;
	}
	.btn-primary:focus {
	    background-color: #4695ed;
	    border-color: #4695ed;
	}
	.btn-primary:active {
	    background-color: #4695ed;
	    border-color: #4695ed;
	}
	.btn-primary:hover {
	    background-color: #4695ed;
	    border-color: #4695ed;
	}
    .moreDetailBtn:hover {
        background-color: #ccd0d7;
        border-radius: 5px 5px 5px 5px;
    }
    .personalInfomu {
        position: relative;
        background-color: #f6f9fa;
        border: 1px solid #e5e9ef;
        overflow: hidden;
        border-radius: 4px;
        padding-left: 0;
    }
    .fileTagmu li:nth-child(6n+1){
        background-color: #E84C3D;
    }
    .fileTagmu li:nth-child(6n+2){
        background-color: #E67E23;
    }
    .fileTagmu li:nth-child(6n+3){
        background-color: #F29C11;
    }
    .fileTagmu li:nth-child(6n+4){
        background-color: #9A59B7;
    }
    .fileTagmu li:nth-child(6n+5){
        background-color: #3196DB;
    }
    .fileTagmu li:nth-child(6n){
        background-color: #2FCB72;
    }
    .fileActive{
        background-color: #4695ED;
        color: white;
    }
    #bodyhidebox {
        top: 23px;
        left: 2%;
        border-radius: 5px;
        background-color:#fff;
        z-Index:9999;
        padding: 10px;
        overflow-y: scroll;
    }
    .fileDetail{
        width: 100%;
        height: 160px;
        padding: 0 20px 0 30px;
    }
    .filePhoto{
        float: left;
    }
    img.photoPer {
        width: 100px;
        height: 100px;
    }
    .fileInfomu,.fileInfomue{
        float: left;
    }
    ul.fileInfomu {
        margin-right: 190px;
    }
    .fileInfomu li,
    .fileInfomue li{
        margin-bottom: 12px;
        font-size: 15px;
    }
    .fileTag {
        overflow: hidden;
        margin-top: -10px;
    }
    .fileTagmu{
        padding-left: 0;
    }
    .fileTagTitle,
    .fileAccountTitle,
    .filePhoneTitle{
        font-size: 18px;
        color: #6BA8F0;
        margin-bottom: 10px;
        float: left;
    }
    .moreDetailBtn{
        width: 90px;
        height: 30px;
        float: right;
        margin-right: 119px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #555;
        border: 1px solid #CCD0D7;
        cursor: pointer;
        transition: all .2s;
        border-radius: 5px 5px 5px 5px;
    }
    span.glyphicon.glyphicon-menu-right {
        color: #555;
        font-size: 11px;
    }
    .fileTagmu li{
        position: relative;
        float: left;
        min-width: 90px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: white;
        background-color: deeppink;
        border-radius: 15px 50px 50px 15px;
        padding: 0px 15px;
        margin-right: 12px;
    }
    /*.arrow {
        content: "";
        height: 0px;
        width: 0px;
        border-width: 12px;
        border-style: solid;
        border-color: transparent transparent transparent deeppink;
        position: absolute;
        right: -24px;
    }*/
    .tagCircle{
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        right: 8px;
        top: 9px;
        z-index: 1;
    }
    .fileAccount,
    .filePhone{
        margin-top: 20px;
    }
    .personalInfo{
        position: fixed;
        top: 165px;
        right: 40px;
    }
    .personalInfomu li {
        height: 30px;
        width: 90px;
        text-align: center;
        line-height: 30px;
    }
    .filecont{
        overflow: hidden;
    }
    .personalInfomu a{
        color: black;
    }
    .editSure {
        padding-top: 30px;
        text-align: center;
    }
    .form-control:focus {
        border-color: #4695ed;
        box-shadow: none;
    }
    span.iconfont.icon-jiufuqianbaoicon14 {
        font-size: 12px;
        margin-left: -17px;
        color: red;
    }
    .form-group{
        margin-left: 25px;
    }
    .nameInp{
        display: inline-block;
        width: 220px;
        margin-left: 20px;
        border-radius: 5px;
    }
    .newAdd-trouble{
        color: #6f7689;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 15px;
        float: left;
        margin-right: 25px;
    }
    
    .bulkInsert{
        margin-top: 20px;
        margin-left: 115px;
    }
    .bulkInsert .bulk-input{
        width: 50%;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #ccc;
        padding: 6px;
        outline: none
    }
    input::-webkit-input-placeholder {
        color: #ccc;
    }
    .bulkInsert .newAdd-trouble{
        color: #6f7689;
        font-size: 14px;
        font-weight: 400;
    }
    .bulkInsert-iqre,.bulkInsert-epty,.bulkInsert-sure,.bulkInsert-back{
        width: 70px;
        margin-left: 15px;
        background-color: #4695ed;
        height: 32px;
        font-size: 14px;
        border: 1px solid transparent;
        color: white;
        border-radius: 4px;
    }
    .bulkInsert-epty {
        background-color: #e7e7e7;
        color: black;
        border-color: #adadad;
    }
    .newAdd-input{
        width: 800px;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #e4e4e4;
        outline:none;
        padding: 0 8px 0 8px;
        display: block;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    div#batchKey {
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        margin-left: 116px;
    }
    .el-tag .el-icon-close{
        color: white;
    }
    .el-tag{
        background-color: #4695ed;
    }
    .newAdd-answer {
        margin-bottom: 35px;
    }
    input.bulkInsert-sure,input.bulkInsert-back {
        width: 100px;
    }
    .sureBack {
        text-align: center;
        margin-top: 25px;
    }
    div#edui1_iframeholder {
        height: 200px!important;
    }
    button.el-button.el-button--default {
	    width: 85px;
	    height: 30px;
	    line-height: 6px;
	    margin-right: -3px;
	}
</style>
</body>
</html>